<template>
  <div >
    <div v-for="item,index in data" class="sh-tree" :key="nodekey(index)" v-show="index>0">
      <div class="sh-tree-label" :class="{'active':detection(item)}" @click.stop="handleclick(item,nodekey(index))">
          <i  :class="icondown"  v-if="item[setting.children]&&item[setting.children].length>0" @click.stop="checkIsShow"></i> 
      <i class="el-icon-minus" v-else></i> 
     <span class="sh-tree-labeltext">{{item[setting.name]||nodekey(index,item)}}</span> </div>
      <div  v-show="isshow" style="margin-left:15px">
          <tree v-if="item[setting.children]&&item[setting.children].length>0" :data="item[setting.children]" :parentindex="nodekey(index)" :setting="setting"></tree> 
      </div>    
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => new Array()
    },
    setting:{
        type:Object,
        default:()=>{
            return{
            name:'name',
            children:'children',
            checked:"checked"
        }}
    },
    parentindex:{
        type :String,
        default:'root'
    },
    activelist:{
        type:Array,
        default:()=>new Array()
    }
  },
  name: "tree",
  data(){
      return {
          isshow:false
      }
  },
  components: {},
  computed:{
      icondown(){
          return this.isshow?'el-icon-caret-bottom':'el-icon-caret-right'
      }   
  },
  methods:{
      detection(item){
          if( this.activelist.includes(item.did)){
              return true;
          }
      },
        nodekey(index,item){
            let arr=this.parentindex.split('-');
            arr.push(index+1);
            if(item){
                arr.shift();
                arr.unshift(item.type)
            }
          return arr.join('-')
      },
      checkIsShow(){
          this.isshow=!this.isshow
      },
      handleclick(data,index){
          this.$emit("ItemCheck",data,index);
      }
  }
};
</script>
<style type="css">
    .sh-tree{
        user-select: none;

    }
    .sh-tree-label{
        /* display: inline; */
        padding: 2px;
    }
    .sh-tree-label:hover {
        background: #f2f2f2
    }
</style>
<style  scoped>
.active {
   background:  #eee
}
</style>

